<template>
  <div class="login-left">
    <el-link class="back2home" @click="$router.push('/')">返回 </el-link>
    <h2 class="login-title">用户登录</h2>
    <el-form>
      <el-form-item>
        <el-input placeholder="账号" v-model="account.idcard"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          placeholder="密码"
          v-model="account.pwd"
          show-password
        ></el-input>
      </el-form-item>
    </el-form>
    <el-row class="login-box">
      <el-button class="login-btn" type="primary" round @click="handleLogin"
        >登录</el-button
      >
    </el-row>
    <div class="link">
      <!-- <el-link type="primary">忘记密码</el-link> -->
    </div>

    <div class="line">
      <!-- <a href="#">其他方式登录</a> -->
    </div>
    <p class="Agreement">
      登录即表示同意平台<a>《隐私政策》</a>和<a>《用户协议》</a>
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      account: {
        idcard: "52242319990924931X",
        pwd: "123456",
      },
    };
  },
  methods: {
    handleLogin() {
      this.$store.dispatch("loginModule/accountLoginAction", {
        ...this.account,
      });
    },
  },
  created() {},
};
</script>

<style scoped lang="scss">
.login-left {
  width: 540px;
  height: 584px;
  box-sizing: border-box;
  padding: 68px 90px 51px;
  border-right: 2px solid #f2f4f7;
  position: relative;

  .back2home {
    position: absolute;
    top: 40px;
    left: 50px;
  }

  .login-title {
    text-align: center;
    margin-bottom: 44px;
  }

  ::v-deep .el-input__inner {
    border-radius: 40px !important;
    height: 48px;
  }

  .login-btn {
    margin: 22px 0 24px 0;

    width: 100%;
    font-size: 18px;
    border-radius: 70px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
    background: linear-gradient(45deg, #68aaff, #6066ff);
    border-color: none;
  }

  .link {
    text-align: right;
    padding-right: 14px;
    box-sizing: border-box;
    margin-bottom: 20px;
  }

  .line {
    border-top: 2px solid #fafafa;
    text-align: center;
    margin-top: 20px;
    padding-top: 24px;

    a {
      color: #91a0b5;
      font-size: 14px;
      text-decoration: none;

      &::after {
        content: "";
        display: inline-block;
        width: 6px;
        height: 10px;
        background: url(../../../assets/icon-right.png) no-repeat center;
        background-size: cover;
        margin-left: 5px;
      }
    }
  }

  .Agreement {
    text-align: center;
    font-size: 12px;
    color: #a8a8b3;
    position: relative;
    left: 0px;
    bottom: -70px;

    a {
      display: inline-block;
      padding: 0 5px;
      color: #3a8bff;
    }
  }
}

@media screen and (max-width: 1360px) {
  .login-left {
    width: 440px;
    height: 584px;
    box-sizing: border-box;
    padding: 68px 50px 51px;
  }
}
</style>
